<template>
  <div class="hot-search">
    <div class="hot-words">
      <a v-for="(item, index) in hotWords" :key="index" :href="item.link">{{ item.text }}</a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const hotWords = ref([
  { text: '手机', link: '#' },
  { text: '笔记本', link: '#' },
  { text: '电视', link: '#' },
  { text: '空调', link: '#' },
  { text: '冰箱', link: '#' },
  { text: '洗衣机', link: '#' },
  { text: '游戏', link: '#' },
  { text: '平板电脑', link: '#' },
  { text: '母婴玩具', link: '#' }
]);
</script>

<style lang="scss" scoped>
.hot-search {
  margin-top: 5px;
  
  .hot-words {
    display: flex;
    flex-wrap: wrap;
    
    a {
      margin-right: 15px;
      font-size: 12px;
      color: #999;
      margin-bottom: 3px;
      
      &:hover {
        color: var(--primary-color);
      }
    }
  }
}
</style> 